<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>svg制作</title>
	</head>
	<body>

      <style>
h1
{
	text-shadow: 5px 5px 5px #FFFF00;
}
</style>
</head>
<body>

<h1>The moving fallen leaves!</h1>
<p>用鼠标轻触叶子，看看会发生什么？
	试一试你能不能追赶到它！</p>


 <svg width="150px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="feather-alt" class="svg-inline--fa fa-feather-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      	<path fill="green"
      	id="green leaf"
      	d="M512 0C460.22 3.56 96.44 38.2 71.01 287.61c-3.09 26.66-4.84 53.44-5.99 80.24l178.87-178.69c6.25-6.25 16.4-6.25 22.65 0s6.25 16.38 0 22.63L7.04 471.03c-9.38 9.37-9.38 24.57 0 33.94 9.38 9.37 24.59 9.37 33.98 0l57.13-57.07c42.09-.14 84.15-2.53 125.96-7.36 53.48-5.44 97.02-26.47 132.58-56.54H255.74l146.79-48.88c11.25-14.89 21.37-30.71 30.45-47.12h-81.14l106.54-53.21C500.29 132.86 510.19 26.26 512 0z">
      	</path></svg>
      	
      	<svg width="150px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="feather-alt" class="svg-inline--fa fa-feather-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      	<path fill="yellow"
      	id="green leaf"
      	d="M512 0C460.22 3.56 96.44 38.2 71.01 287.61c-3.09 26.66-4.84 53.44-5.99 80.24l178.87-178.69c6.25-6.25 16.4-6.25 22.65 0s6.25 16.38 0 22.63L7.04 471.03c-9.38 9.37-9.38 24.57 0 33.94 9.38 9.37 24.59 9.37 33.98 0l57.13-57.07c42.09-.14 84.15-2.53 125.96-7.36 53.48-5.44 97.02-26.47 132.58-56.54H255.74l146.79-48.88c11.25-14.89 21.37-30.71 30.45-47.12h-81.14l106.54-53.21C500.29 132.86 510.19 26.26 512 0z">
      	</path></svg>
      	
      	<svg width="150px" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="feather-alt" class="svg-inline--fa fa-feather-alt fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      	<path fill="pink"
      	id="green leaf"
      	d="M512 0C460.22 3.56 96.44 38.2 71.01 287.61c-3.09 26.66-4.84 53.44-5.99 80.24l178.87-178.69c6.25-6.25 16.4-6.25 22.65 0s6.25 16.38 0 22.63L7.04 471.03c-9.38 9.37-9.38 24.57 0 33.94 9.38 9.37 24.59 9.37 33.98 0l57.13-57.07c42.09-.14 84.15-2.53 125.96-7.36 53.48-5.44 97.02-26.47 132.58-56.54H255.74l146.79-48.88c11.25-14.89 21.37-30.71 30.45-47.12h-81.14l106.54-53.21C500.29 132.86 510.19 26.26 512 0z">
      	</path></svg>
      	
      	
<style> 
svg
{
	width:500px;
	height:500px;
	background:white, white;
	position:relative;
	animation: infinite;
	animation-name:myfirst, second;
	animation-duration:5s, 5s;
	animation-timing-function:linear;
	animation-delay:0s, 4.5s;
-webkit-animation: infinite;	
-webkit-animation-name:myfirst, second;
-webkit-animation-duration:3s, 3s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s, 1s;	
}

@keyframes myfirst
{
	from {background:white;}
	to {background:white;}
}

@-webkit-keyframes myfirst
{
	from {background:white;}
	to {background:white;}
}

@keyframes second
{
	0%   {background:white; left:0px; top:100px;}
	25%  {background:white; left:300px; top:200px;}
	50%  {background:white; left:400px; top:500px;}
	75%  {background:white; left:0px; top:600px;}
	100% {background:white; left:0px; top:700px;}
}

@-webkit-keyframes second
{
	0%   {background:white; left:0px; top:100px;}
	25%  {background:white; left:300px; top:200px;}
	50%  {background:white; left:400px; top:500px;}
	75%  {background:white; left:0px; top:600px;}
	100% {background:white; left:0px; top:700px;}
}
	
</style>

<style> 
svg {
    width: 200px;
    height: 200px;
  
    -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
    transition: width 1s, height 1s, transform 1s;
}

svg:hover {
    width: 100px;
    height: 100px;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}





</style>



	</body>
</html>